<template>
    <view id="ZLJIndex" :class="{ elderStyle: !showEdition }">
        <view class="mainWrap" ref="mainWrap">
            <view class="top">
                <!-- <van-swipe :autoplay="3000"> -->
                <span v-for="(item, index) in imageList" :key="index">
                    <img style="width: 100%; " :src="item.img" />
                    <!-- </van-swipe-item> -->
                </span>
                <view class="left-top">
                    <span style="margin-right: 10px">切换用户:</span>
                    <span v-for="(item, index) in tabData" :key="index" class="btn" @click="ISShowClick(item, index)">
                        {{ item }}
                    </span>
                    <span style="float: right" class="btn" v-if="showEdition" @click="EditionClick">开启长辈版</span>
                    <span style="float: right" class="btn" v-if="!showEdition" @click="EditionClick">开启青春版</span>
                </view>
                <!-- <view class="bottom-top">
          <span>
            当前站点：
            <span>{{ areaValue }}</span>
          </span>
          <span class="btn">
            <u-cell is-link title="切换城市" style="color: #fff" @click="handleChange"></u-cell>
          </span>
        </view> -->
            </view>
            <view class="content">
                <view v-show="showType == 'GJ'" class="main">
                    <p class="subTitle">房屋鉴定</p>
                    <ul class="content-nfjs" v-if="IShwows">
                        <li v-for="(item, index) in NFJSData" :style="{
                            marginRight: (index + 1) % 2 !== 0 ? '2%' : '',
                            background: 'url(' + item.bg1 + ') no-repeat'
                            ,
                        }" :key="index" @click="NFJSClick(item)">
                            <span style="width: 98px" :style="{ color: item.color }">{{
                                item.name
                            }}</span>
                        </li>
                    </ul>
                    <ul class="content-nfjs" v-else>
                        <li v-for="(item, index) in NFJSDatas" :style="{
                            marginRight: (index + 1) % 2 !== 0 ? '2%' : '',
                            background: 'url(' + item.bg1 + ') no-repeat'
                            ,
                        }" :key="index" @click="NFJSClick(item)">
                            <span style="width: 98px" :style="{ color: item.color }">{{
                                item.name
                            }}</span>
                        </li>
                    </ul>
                    <p class="subTitle">鉴定单位</p>
                    <ul class="content-nfjs" v-if="showBg1">
                        <li v-for="(item, index) in NFJSData11" :style="{
                            marginRight: (index + 1) % 2 !== 0 ? '2%' : '',
                            background: 'url(' + item.bg1 + ') no-repeat'
                        }" :key="index" @click="NFJSClick(item)">
                            <span style="width: 98px" :style="{ color: item.color }">{{
                                item.name
                            }}</span>
                        </li>
                    </ul>
                </view>
                <view class="main" v-show="showType == 'GJ' && NFFMData && NFFMData.length > 0">
                    <p class="subTitle">农房风貌</p>
                    <ul class="content-nffm">
                        <li v-for="(item, index) in NFJSData11" :style="{ marginRight: (index + 1) % 2 !== 0 ? '2%' : '' }"
                            :key="index" @click="handleGotoXiang(item)">
                            <img style="width: 100%" :src="'data:image/png;base64,' + item.F_SCPICTURES" />
                            <span class="text">{{ item.F_VILLAGE_CITYNAME }}</span>
                        </li>
                    </ul>
                </view>
                <view class="phoneText">
                    <p style="text-align: center">
                        本服务由浙江政务服务网 浙江省住房和城乡建设厅
                    </p>
                    <p style="text-align: center">
                        <!-- 浙江省自然资源厅 浙江省农业农村厅提供 -->
                    </p>
                    <p style="text-align: center">
                        服务咨询热线：
                        <span style="color: blue" @click="phoneCall('0571-85216767')">0571-85216767</span>
                    </p>
                </view>
            </view>
        </view>
        <view>
            <u-toast ref="uToast"></u-toast>
        </view>
        <u-picker :closeOnClickOverlay="true" @close="show20 = false" :show="show20" ref="uPicker" keyName="CITYNAME"
            @cancel="cancel" :columns="columns20" @confirm="confirm20" @change="changeHandler20"></u-picker>
    </view>
</template>

<script>
import {
    getDatalistForTree,
    findCompanyInformation,
    ECAOpenDataView,
} from "@/common/utils/api.js";
export default {
    data () {
        return {
            showEdition: true,
            columns20: [],
            IShwows: true,
            columns21: [],
            columns22: [],
            show20: false,
            ISShow1: true,
            nowIndex: 0,
            tabIndex: 0,
            showBg1: true,
            ISSHowTG: false,
            tabData: ["个人", "企业"],
            areaValue: "",
            areaCode: "",
            ISShow: true,
            IsShowAre: false,
            showType: "GJ",
            noData: false,
            usernem: "",
            imageList: [
                {
                    img: "https://nfzjszlb.jst.zj.gov.cn/serverfile/zheliban/icon/ZLJ/71.png",
                },
            ],
            bottomData: [
                {
                    name: "首页",
                    icon: "https://nfzjszlb.jst.zj.gov.cn/serverfile/zheliban/icon/ZLJ/20.png",
                    icon1:
                        "https://nfzjszlb.jst.zj.gov.cn/serverfile/zheliban/icon/ZLJ/99%20(1).png",
                    icons:
                        "https://nfzjszlb.jst.zj.gov.cn/serverfile/zheliban/icon/ZLJ/20-1.png",
                    icons1:
                        "https://nfzjszlb.jst.zj.gov.cn/serverfile/zheliban/icon/ZLJ/20-1.png",
                },
                {
                    name: "我的待办",
                    icons:
                        "https://nfzjszlb.jst.zj.gov.cn/serverfile/zheliban/icon/ZLJ/21.png",
                    icon: "https://nfzjszlb.jst.zj.gov.cn/serverfile/zheliban/icon/ZLJ/21-1.png",
                },
                {
                    name: "我的收藏",
                    icons:
                        "https://nfzjszlb.jst.zj.gov.cn/serverfile/zheliban/icon/ZLJ/22.png",
                    icon: "https://nfzjszlb.jst.zj.gov.cn/serverfile/zheliban/icon/ZLJ/22-1.png",
                },
            ],
            NFJSData: [
                {
                    name: "个人委托",
                    bg1: "https://nfzjszlb.jst.zj.gov.cn/serverfile/zheliban/icon/ZLJ/73.png",
                    bg: "https://nfzjszlb.jst.zj.gov.cn/serverfile/zheliban/icon/ZLJ/73.png",
                    color: "#5486CB",
                },
                // {
                //   name: '我要改扩建',
                //   bg: 'https://nfzjszlb.jst.zj.gov.cn/serverfile/zheliban/icon/ZLJ/4.png'
                // },
                {
                    name: "单位委托",
                    bg1: "https://nfzjszlb.jst.zj.gov.cn/serverfile/zheliban/icon/ZLJ/74.png",
                    bg: "https://nfzjszlb.jst.zj.gov.cn/serverfile/zheliban/icon/ZLJ/74.png",
                    color: "#A78D61",
                }
            ],
            NFJSDatas: [
                {
                    name: "线下委托",
                    bg1: "https://nfzjszlb.jst.zj.gov.cn/serverfile/zheliban/icon/ZLJ/73.png",
                    bg: "https://nfzjszlb.jst.zj.gov.cn/serverfile/zheliban/icon/ZLJ/73.png",
                    color: "#5486CB",
                },
                // {
                //   name: '我要改扩建',
                //   bg: 'https://nfzjszlb.jst.zj.gov.cn/serverfile/zheliban/icon/ZLJ/4.png'
                // },
                {
                    name: "我的项目",
                    bg1: "https://nfzjszlb.jst.zj.gov.cn/serverfile/zheliban/icon/ZLJ/74.png",
                    bg: "https://nfzjszlb.jst.zj.gov.cn/serverfile/zheliban/icon/ZLJ/74.png",
                    color: "#A78D61",
                }
            ],
            NFJSData11: [
                {
                    name: "鉴定机构",
                    bg1: "https://nfzjszlb.jst.zj.gov.cn/serverfile/zheliban/icon/ZLJ/75.png",
                    bg: "https://nfzjszlb.jst.zj.gov.cn/serverfile/zheliban/icon/ZLJ/75.png",
                    color: "#A78D61",
                },
            ],
            NFJSDataThirdParty: [
                {
                    name: "我的项目",
                    bg: "https://nfzjszlb.jst.zj.gov.cn/serverfile/zheliban/icon/ZLJ/33.png",
                },
            ],
            ISShowList: true,
            NFJSData1: [
                {
                    name: "我的项目",
                    bg: "https://nfzjszlb.jst.zj.gov.cn/serverfile/zheliban/icon/ZLJ/4.png",
                    color: "#A78D61",
                },
                {
                    name: "我要代办",
                    bg: "https://nfzjszlb.jst.zj.gov.cn/serverfile/zheliban/icon/ZLJ/3.png",
                    bg1: "https://nfzjszlb.jst.zj.gov.cn/serverfile/zheliban/icon/ZLJ/98 (4).png",
                    color: "#5486CB",
                },
            ],
            NFJSData2: [
                {
                    name: "办事记录",
                    bg: "https://nfzjszlb.jst.zj.gov.cn/serverfile/zheliban/icon/ZLJ/7.png",
                    color: "#A78D61",
                },
            ],
            NFFWData: [
                {
                    name: "图集服务",
                    bg: "https://nfzjszlb.jst.zj.gov.cn/serverfile/zheliban/icon/ZLJ/9.png",
                    bg1: "https://nfzjszlb.jst.zj.gov.cn/serverfile/zheliban/icon/ZLJ/99%20(6).png",
                },
                {
                    name: "工匠服务",
                    bg: "https://nfzjszlb.jst.zj.gov.cn/serverfile/zheliban/icon/ZLJ/10.png",
                    bg1: "https://nfzjszlb.jst.zj.gov.cn/serverfile/zheliban/icon/ZLJ/99%20(7).png",
                },
                {
                    name: "公积金提取",
                    bg: "https://nfzjszlb.jst.zj.gov.cn/serverfile/zheliban/icon/ZLJ/11.png",
                    bg1: "https://nfzjszlb.jst.zj.gov.cn/serverfile/zheliban/icon/ZLJ/99%20(1).png",
                },
                {
                    name: "政策法规",
                    bg: "https://nfzjszlb.jst.zj.gov.cn/serverfile/zheliban/icon/ZLJ/14.png",
                    bg1: "https://nfzjszlb.jst.zj.gov.cn/serverfile/zheliban/icon/ZLJ/99%20(2).png",
                },
                {
                    name: "建房知识",
                    bg: "https://nfzjszlb.jst.zj.gov.cn/serverfile/zheliban/icon/ZLJ/15.png",
                    bg1: "https://nfzjszlb.jst.zj.gov.cn/serverfile/zheliban/icon/ZLJ/99%20(3).png",
                },
            ],
            NFFWData1: [
                {
                    name: "贷款服务",
                    bg: "https://nfzjszlb.jst.zj.gov.cn/serverfile/zheliban/icon/ZLJ/12.png",
                    bg1: "https://nfzjszlb.jst.zj.gov.cn/serverfile/zheliban/icon/ZLJ/99%20(1).png",
                },
                {
                    name: "政策法规",
                    bg: "https://nfzjszlb.jst.zj.gov.cn/serverfile/zheliban/icon/ZLJ/14.png",
                    bg1: "https://nfzjszlb.jst.zj.gov.cn/serverfile/zheliban/icon/ZLJ/99%20(2).png",
                },
                {
                    name: "建房知识",
                    bg: "https://nfzjszlb.jst.zj.gov.cn/serverfile/zheliban/icon/ZLJ/15.png",
                    bg1: "https://nfzjszlb.jst.zj.gov.cn/serverfile/zheliban/icon/ZLJ/99%20(3).png",
                },
                {
                    name: "天工巧匠",
                    bg: "https://nfzjszlb.jst.zj.gov.cn/serverfile/zheliban/icon/ZLJ/16.png",
                    bg1: "https://nfzjszlb.jst.zj.gov.cn/serverfile/zheliban/icon/ZLJ/16.png",
                },
            ],
            NFFWData2: [
                {
                    name: "贷款服务",
                    bg: "https://nfzjszlb.jst.zj.gov.cn/serverfile/zheliban/icon/ZLJ/12.png",
                    bg1: "https://nfzjszlb.jst.zj.gov.cn/serverfile/zheliban/icon/ZLJ/99%20(1).png",
                },
                {
                    name: "政策法规",
                    bg: "https://nfzjszlb.jst.zj.gov.cn/serverfile/zheliban/icon/ZLJ/14.png",
                    bg1: "https://nfzjszlb.jst.zj.gov.cn/serverfile/zheliban/icon/ZLJ/99%20(2).png",
                },
                {
                    name: "建房知识",
                    bg: "https://nfzjszlb.jst.zj.gov.cn/serverfile/zheliban/icon/ZLJ/15.png",
                    bg1: "https://nfzjszlb.jst.zj.gov.cn/serverfile/zheliban/icon/ZLJ/99%20(3).png",
                },
            ],
            NFFMData: [],
            urlHE:
                "https://nfzjszlb.jst.zj.gov.cn/webserver/appcs/index.html#/BizForm?bg=95c95888-1617-4310-847e-c0a94ec9a923&fd=PKID&ve=20&ft=edit&tk=" +
                "",
            contentData: [],
            contentData1: [
                {
                    name: "我要建房申请",
                    num: 0,
                },
                {
                    name: "我的贷款申请",
                    num: 0,
                },
                {
                    name: "我购买的保险",
                    num: 0,
                },
                {
                    name: "我要改扩建申请",
                    num: 0,
                },
                {
                    name: "我要危改申请",
                    num: 0,
                },
                {
                    name: "我要办理不动产权证申请",
                    num: 0,
                },
            ],
            handleGoto: 0,
            cascaderValue: "",
            options: [
                {
                    text: "浙江省",
                    value: "330000000000",
                    children: [],
                },
            ],
        };
    },
    mounted () {
        var span = document.getElementsByClassName("btn");
        let id = 0
        if (uni.getStorageSync('isPer') == '0' || uni.getStorageSync('isPer') == '1' || uni.getStorageSync('userType') == '农户') {
            id = 0
        } else {
            id = 1
        }
        for (var i = 0; i <= 2; i++) {
            if (id == i) {
                debugger
                span[i].style.background = "#71a6fc";
            } else {
                debugger
                span[i].style.background = "";
            }
        }
        if (ZWJSBridge) {
            ZWJSBridge.setTitle({
                title: "房屋鉴定委托",
            })
                .then((res) => { })
                .catch((err) => { });
        }
        if (uni.getStorageSync('uiStyle') && uni.getStorageSync('uiStyle') == 'normal') {
            this.showEdition = true
        } else {
            this.showEdition = false
        }
        setTimeout(() => {
            this.getXianOpenDataView(
                "330000000000",
                "0",
                "e9c98787-4966-4365-80b0-c1cc678c6f85"
            );
            this.getXianOpenDataView("330100000000", '1', '77fdf2b0-0eb5-4243-a0a4-6185299ccd34');
            this.getXianOpenDataView1("330100000000", '1', '77fdf2b0-0eb5-4243-a0a4-6185299ccd34');
        }, 1000)
    },
    onLoad () {
        //获取数据
        this.getData();
        if (uni.getStorageSync("userType")) {
        } else {
            uni.setStorageSync("userType", "农户");
        }
    },
    methods: {
        CITYCODE1 (str) {
            if (str.endsWith("0000000000") || str.indexOf("33000000") > -1) {
                //省
                return "0";
            } else if (str.endsWith("00000000")) {
                return "1";
            } else if (str.endsWith("000000")) {
                return "2";
            } else if (str.endsWith("000")) {
                return "3";
            }
        },
        phoneCall (data) {
            ZWJSBridge.onReady(() => {
                ZWJSBridge.phoneCall({
                    corpId: data,
                })
                    .then((result) => { })
                    .catch((error) => { });
            });
        },
        confirm20 (e) {
            this.show20 = false;
            let cty = (e.value[0].CITYCODE).toString().substring(0, 6)
            uni.setStorageSync('citycode', cty)
            console.log(e.value, e.value[0].CITYNAME, this.columns21[0][0].CITYNAME);
            this.areaValue =
                e.value[0].CITYNAME +
                "/" +
                (e.value[1] == undefined
                    ? this.columns21[0][0].CITYNAME
                    : e.value[1].CITYNAME);
        },
        cancel () {
            this.show20 = false
        },
        changeHandler20 (e) {
            // this.getXianOpenDataView(e.value[0].CITYCODE)
            const {
                columnIndex,
                value,
                values, // values为当前变化列的数组内容
                index,
                // 微信小程序无法将picker实例传出来，只能通过ref操作
                picker = this.$refs.uPicker,
            } = e;
            this.getXianOpenDataView1(value[0].CITYCODE, '1', '77fdf2b0-0eb5-4243-a0a4-6185299ccd34');
            // 当第一列值发生变化时，变化第二列(后一列)对应的选项
            if (columnIndex === 0) {
                // picker为选择器this实例，变化第二列对应的选项
                setTimeout(() => {
                    picker.setColumnValues(1, this.columns21[0]);
                }, 500);
            }
        },
        // getXianOpenDataView: async function (data) {
        //   const res = await getDatalistForTree(data);
        //   this.columns20.push(res);
        // },
        getXianOpenDataView: async function (data, data1, data2) {
            let time = Date.now();
            const res = await ECAOpenDataView(
                data2,
                JSON.stringify([{ field: "PID", value: data }]),
                time
            );
            this.columns20.push(res.Data);
        },
        getXianOpenDataView1: async function (data, data1, data2) {
            this.columns21 = [];
            let time = Date.now();
            const res = await ECAOpenDataView(
                data2,
                JSON.stringify([{ field: "PID", value: data }]),
                time
            );
            this.columns21.push(res.Data);
        },
        getXianOpenDataView2: async function (data, data1, data2) {
            this.columns22 = [];
            let time = Date.now();
            const res = await ECAOpenDataView(
                data2,
                JSON.stringify([{ field: "PID", value: data }]),
                time
            );
            this.columns22.push(res.Data);
        },
        NFJSClick (item) {
            switch (item.name) {
                case "个人委托":
                    // uni.$emit('app:goto', {
                    //      url: `/pages/applyAppraisal/applyAppraisal`,
                    //      animationType: 'fade-in'
                    //  });
                    uni.setStorageSync('reload', '')
                    if (uni.getStorageSync('isPer') == 0 || uni.getStorageSync('isPer') == 1) {
                        uni.navigateTo({
                            url: "/pages/applyAppraisal/applyAppraisal",
                            animationType: "fade-in",
                        });
                    } else {
                        ZWJSBridge.alert({
                            title: "提示",
                            buttonName: "确定",
                            message: "当前服务仅支持个人，请先登录个人账户。",
                        })
                            .then((res) => {
                                console.log(res);
                            })
                            .catch((err) => {
                                this.showToast12()
                            });
                    }
                    break;
                case "单位委托":
                    uni.setStorageSync('reload', '')
                    // uni.getStorageSync('isPer') == 2
                    if (uni.getStorageSync('isPer') == 1) {
                        uni.navigateTo({
                            url: "/pages/Commissioned/Commissioned",
                            animationType: "fade-in",
                        });
                    }
                    break;
                case "鉴定机构":
                    uni.setStorageSync('reload', '')
                    uni.navigateTo({
                        url: "/pages/Authentication/Authentication",
                        animationType: "fade-in",
                    });
                    break;
                case "线下委托":
                    uni.navigateTo({
                        url: "/pages/offlineCommission/offlineCommission",
                        animationType: "fade-in",
                    });
                    break;
                case "我的项目":
                    uni.navigateTo({
                        url: "/pages/Authentication/Authentication",
                        animationType: "fade-in",
                    });
                    break;
            }
        },
        showToast11 (params) {
            this.$refs.uToast.show({
                message: "当前服务仅支持法人，请先登录法人账户。",
                type: "error",
            });
        },
        showToast12 (params) {
            this.$refs.uToast.show({
                message: "当前服务仅支持个人，请先登录个人账户。",
                type: "error",
            });
        },
        ISShowClick (data, id) {
            uni.setStorageSync("userType", data);
            if (data == '个人') {
                uni.setStorageSync('isPer', '1')
                this.IShwows = true
            } else {
                uni.setStorageSync('isPer', '2')
                this.IShwows = false
            }
            var span = document.getElementsByClassName("btn");
            for (var i = 0; i <= 2; i++) {
                if (id == i) {
                    span[i].style.background = "#71a6fc";
                } else {
                    span[i].style.background = "";
                }
            }
        },
        EditionClick () {
            this.showEdition = !this.showEdition;
            uni.setStorageSync("uiStyle", this.showEdition ? "normal" : "elder");
        },
        handleChange () {
            this.show20 = true;
        },
        //获取数据
        async getData () { },
    },
};
</script>

<style lang="scss" scoped>
#ZLJIndex {
    font-family: 黑体;
    width: 100vw;
    overflow-x: hidden;
    height: 100vh;
    overflow: auto;
    background-color: #f6f6f6;

    .mainWrap {
        width: 100%;
        height: calc(100vh - 0.88rem);
        overflow: auto;
    }

    .subTitle {
        font-size: 1rem;
        font-family: 黑体;
        height: 2rem;
        line-height: 2rem;
        font-weight: 800;
        color: #414652;
    }

    .main {
        clear: both;
        background: #ffffff;
        padding: 10px;
        margin-bottom: 0.2rem;
    }

    .top {
        position: relative;
        color: #ffffff;

        .left-top {
            width: 95%;
            position: absolute;
            left: 14px;
            top: 10px;

            .btn {
                width: auto;
                height: 28px;
                // border: 1px solid #e1eaff;
                display: inline-block;
                line-height: 28px;
                text-align: center;
                padding: 0 6px;
                margin-left: -1px;
                border: 1px solid rgba(255, 255, 255, 0.5);
                border-radius: 2px;
            }

            .btn1 {
                width: auto;
                height: 28px;
                // border: 1px solid #e1eaff;
                display: inline-block;
                line-height: 28px;
                text-align: center;
                padding: 0 8px;
                margin-left: -6px;
                border: 1px solid #b3e6ff;
                border-right: none;
                border-radius: 2px;
            }
        }

        .bottom-top {
            width: 95%;
            position: absolute;
            left: 10px;
            bottom: 10px;

            .btn {
                float: right;
                width: auto;
                height: 26px;
                // border: 1px solid #e1eaff;
                border-radius: 16px;
                display: inline-block;
                line-height: 26px;
                text-align: center;
            }
        }
    }

    .custom-indicator {
        position: absolute;
        right: 5px;
        bottom: 5px;
        padding: 2px 5px;
        font-size: 12px;
        background: rgba(0, 0, 0, 0.1);
    }

    .SQList {
        height: auto;
        background: #ffffff;

        .title {
            width: 100%;
            height: 50px;
            background: #007aff;
            line-height: 50px;
            text-align: center;
            color: #ffffff;
            font-size: 20px;
            position: relative;
        }

        ul li {
            padding: 10px;
            height: 90px;
            border-bottom: 1px solid #d2d2d2;
            margin-bottom: 10px;
        }
    }

    .content {
        width: 100%;
        height: calc(100vh - 260px);

        .line {
            width: 6px;
            height: 26px;
            background: #007aff;
            display: inline-block;
        }

        .content-nfjs {
            clear: both;
            overflow: hidden;
            height: 170px;

            li {
                width: 168px;
                height: 194px;
                float: left;
                margin-top: 2%;
                // position: relative;
                background-size: 80% 80% !important;
                display: flex;
                align-items: center;
                justify-content: center;
                // padding:2rem 0 0 2.6rem;
                font-size: 0.9rem;
            }
        }

        .content-nffw {
            clear: both;
            overflow: hidden;
            color: #414652;

            li {
                width: 25%;
                float: left;
                text-align: center;

                span {
                    width: 100%;
                    display: inline-block;
                    font-size: 0.24rem;
                    text-align: center;
                    margin: 0.18rem 0;
                }

                img {
                    width: 0.8rem;
                    height: 0.8rem;
                }
            }
        }

        .content-nffm {
            clear: both;
            overflow: hidden;

            li {
                width: 48%;
                font-size: 0.24rem;
                float: left;
                margin-top: 2%;
                margin-bottom: 3%;

                .text {
                    width: 100%;
                    display: inline-block;
                    height: 0.6rem;
                    background: #ffffff;
                    box-shadow: 2px 1px 6px 0px rgba(0, 0, 0, 0.17);
                    border-radius: 0px 0px 20px 20px;
                    text-align: center;
                    line-height: 0.6rem;
                }

                img {
                    width: 100%;
                    height: 1.5rem;
                }
            }
        }
    }

    .phoneText {
        position: relative;
        bottom: -26px;
        left: 12%;
        transform: translateX(-12%);
        margin-top: 14px;
        padding-bottom: 40px;
    }

    .bottom {
        clear: both;
        z-index: 999;
        // height: 100px;
        width: 100%;
        text-align: center;
        height: 0.88rem;
        background: #ffffff;
        border-top: 1px solid #d2d2d2;

        ul {
            width: 100%;
            height: 100%;
            clear: both;
            overflow: hidden;
            display: flex;
            align-items: center;

            li {
                float: left;
                width: 33.3%;
                font-size: 0.2rem !important;

                img {
                    height: 0.35rem;
                    margin-bottom: 0.02rem;
                }
            }
        }
    }
}

//长辈版样式
.elderStyle {
    .subTitle {
        font-size: 1.2rem !important;
        height: 1.84rem !important;
        line-height: 1.84rem !important;
    }

    .content-nfjs {
        li {
            height: 10rem !important;
            padding-left: 2.03rem !important;
            font-size: 1.2rem !important;
        }
    }

    .content-nffw {
        li {
            span {
                font-size: 1.2rem !important;
                text-align: center !important;
            }

            img {
                width: 1.8rem !important;
                height: 1.8rem !important;
            }
        }
    }

    .content-nffm {
        li {
            font-size: 1.2rem !important;
        }
    }

    .phoneText {
        font-size: 1.2rem !important;
    }

    .top {
        font-size: 1.2rem !important;
    }
}
</style>

<style lang="scss">
#ZLJIndex {
    .van-cell {
        padding: 4px !important;
        overflow: hidden;
        color: #fff !important;
        font-size: 14px;
        line-height: 24px;
        background-color: transparent !important;
    }

    .van-cell__value--alone,
    .van-cell__right-icon {
        color: #fff !important;
    }

    ::v-deep .u-cell__title-text[data-v-1c4434ae] {
        color: #fff !important;
    }

    ::v-deep .u-cell__body[data-v-1c4434ae] {
        padding: 0 !important;
    }

    ::v-deep .u-icon__icon--info[data-v-2ee87dc9] {
        color: #fff !important;
    }

    ::v-deep .u-cell--clickable[data-v-1c4434ae] {
        background-color: transparent !important;
    }

    ::v-deep .u-cell__body[data-v-947f6bf8] {
        color: #fff !important;
    }

    ::v-deep .u-cell__title-text[data-v-947f6bf8] {
        color: #fff !important;
    }

    ::v-deep .u-icon__icon--info[data-v-acc64e30] {
        color: #fff !important;
    }
}
</style>
